<template>
  <div class="count-down-box">
    <img src="http://static.52letsgo.cn/zz/wechatimg/ic_clock.png">
    <p style="color: black">打烊倒计时:</p>
    <p>{{time}}</p>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        time: "0"
      }
    },
    props: {
      closetime: 0
    },
    mounted: function () {
    },
    watch: {
      closetime: function (nValue, oValue) {
        if (!this.timer) {
          this.time = this.closetime;
          this.setCountDown();
        }
      }
    },
    methods: {
      setCountDown(){
        var that = this;
        this.timer = setInterval(function () {
          var time = that.time;
          var t = time.split(":");
          var hour = t[0];
          var minute = t[1];
          var second = t[2];
          if (hour < 0) {
            that.time = "已打烊";
            clearInterval(that.timer);
            return;
          }
          second--;
          if (second < 0) {
            second = 59;
            minute--;
            if (minute < 0) {
              minute = 59;
              hour--;
              if (hour < 0) {
                that.setData({
                  time: "已打烊"
                });
                clearInterval(that.timer);
                return;
              }
            }
          }
          hour = (Array(2).join('0') + hour).slice(-2);
          minute = (Array(2).join('0') + minute).slice(-2);
          second = (Array(2).join('0') + second).slice(-2);
          that.time = hour + ":" + minute + ":" + second;
//        that.setData({
//          second: second - 1
//        });
        }, 1000);
      }
    }
  }
</script>
<style>
  .count-down-box {
    height: 3.5rem;
    width: 100%;
    padding-left: 1rem;
    background: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0px;
  }

  .count-down-box p {
    font-size: 1.5rem;
    line-height: 3.5rem;
    color: orange;
    padding-left: 1rem;
  }

  .count-down-box img {
    height: 1.8rem;
    width: 1.8rem;
  }
</style>
